<template>
  <div class="index">
    <div class="content-seat"
         v-for="item in 12"
         :key="item">
      <img src="./../../assets/images/flat/moduleTheme1x1.png"
           alt="" />
    </div>
    <Wrap v-for="(item, index) in htmlArray"
          :key="index"
          :item="item"
          :flag="moduleList[index].moduleSeat.length"
          :refName="moduleRefName[index]"
          :styleMessage="dragItemStyle[index].style"></Wrap>-->
    <!--<basic-information
      v-if="moduleList[0].moduleSeat.length > 0"
      :ref="moduleRefName[0]"
      :style="dragItemStyle[0].style"></basic-information>
    <complaint-satisfaction
      v-if="moduleList[1].moduleSeat.length > 0"
      :ref="moduleRefName[1]"
      :style="dragItemStyle[1].style"></complaint-satisfaction>
    <service-order
      v-if="moduleList[2].moduleSeat.length > 0"
      :ref="moduleRefName[2]"
      :style="dragItemStyle[2].style"></service-order>
    <property-charges
      v-if="moduleList[3].moduleSeat.length > 0"
      :ref="moduleRefName[3]"
      :style="dragItemStyle[3].style"></property-charges>
    <security-control
      v-if="moduleList[4].moduleSeat.length > 0"
      :ref="moduleRefName[4]"
      :style="dragItemStyle[4].style"></security-control>
    <equipment-energy
      v-if="moduleList[5].moduleSeat.length > 0"
      :ref="moduleRefName[5]"
      :style="dragItemStyle[5].style"></equipment-energy>
    <warehouse-information
      v-if="moduleList[6].moduleSeat.length > 0"
      :ref="moduleRefName[6]"
      :style="dragItemStyle[6].style"></warehouse-information>
    <staff-attendance
      v-if="moduleList[7].moduleSeat.length > 0"
      :ref="moduleRefName[7]"
      :style="dragItemStyle[7].style"></staff-attendance>
    <equipment-information
      v-if="moduleList[8].moduleSeat.length > 0"
      :ref="moduleRefName[8]"
      :style="dragItemStyle[8].style"></equipment-information>
    <patrol-analysis
      v-if="moduleList[9].moduleSeat.length > 0"
      :ref="moduleRefName[9]"
      :style="dragItemStyle[9].style"></patrol-analysis>
    <employee-report
      v-if="moduleList[10].moduleSeat.length > 0"
      :ref="moduleRefName[10]"
      :style="dragItemStyle[10].style"></employee-report>
    <stock-assets
      v-if="moduleList[11].moduleSeat.length > 0"
      :ref="moduleRefName[11]"
      :style="dragItemStyle[11].style"></stock-assets>
    <assets-handling
      v-if="moduleList[12].moduleSeat.length > 0"
      :ref="moduleRefName[12]"
      :style="dragItemStyle[12].style"></assets-handling>
    <stock-distribution
      v-if="moduleList[13].moduleSeat.length > 0"
      :ref="moduleRefName[13]"
      :style="dragItemStyle[13].style"></stock-distribution>
    <assets-distribution
      v-if="moduleList[14].moduleSeat.length > 0"
      :ref="moduleRefName[14]"
      :style="dragItemStyle[14].style"></assets-distribution>
    <overview-of-the-park
      v-if="moduleList[15].moduleSeat.length > 0"
      :ref="moduleRefName[15]"
      :style="dragItemStyle[15].style"></overview-of-the-park>
    <project-picture
      v-if="moduleList[16].moduleSeat.length > 0"
      :ref="moduleRefName[16]"
      :style="dragItemStyle[16].style"></project-picture>
    <park-environmental-index
      v-if="moduleList[17].moduleSeat.length > 0"
      :ref="moduleRefName[17]"
      :style="dragItemStyle[17].style"></park-environmental-index>
    <park-service-system
      v-if="moduleList[18].moduleSeat.length > 0"
      :ref="moduleRefName[18]"
      :style="dragItemStyle[18].style"></park-service-system>
    <business-incubation-in-parks
      v-if="moduleList[19].moduleSeat.length > 0"
      :ref="moduleRefName[19]"
      :style="dragItemStyle[19].style"></business-incubation-in-parks>
    <talent-introduction
      v-if="moduleList[20].moduleSeat.length > 0"
      :ref="moduleRefName[20]"
      :style="dragItemStyle[20].style"></talent-introduction>
    <industry-distribution
      v-if="moduleList[21].moduleSeat.length > 0"
      :ref="moduleRefName[21]"
      :style="dragItemStyle[21].style"></industry-distribution>
    <trend-of-park-service
      v-if="moduleList[22].moduleSeat.length > 0"
      :ref="moduleRefName[22]"
      :style="dragItemStyle[22].style"></trend-of-park-service>
    <distribution-of-income-scale
      v-if="moduleList[23].moduleSeat.length > 0"
      :ref="moduleRefName[23]"
      :style="dragItemStyle[23].style"></distribution-of-income-scale>
    <tax-scale-distribution
      v-if="moduleList[24].moduleSeat.length > 0"
      :ref="moduleRefName[24]"
      :style="dragItemStyle[24].style"></tax-scale-distribution>
    <patent-distribution-inPark
      v-if="moduleList[25].moduleSeat.length > 0"
      :ref="moduleRefName[25]"
      :style="dragItemStyle[25].style"></patent-distribution-inPark>
    <customer-satisfaction
      v-if="moduleList[26].moduleSeat.length > 0"
      :ref="moduleRefName[26]"
      :style="dragItemStyle[26].style"></customer-satisfaction>
    <overall-of-the-park
      v-if="moduleList[27].moduleSeat.length > 0"
      :ref="moduleRefName[27]"
      :style="dragItemStyle[27].style"></overall-of-the-park>
    <video-surveillance
      v-if="moduleList[28].moduleSeat.length > 0"
      :ref="moduleRefName[28]"
      :style="dragItemStyle[28].style"></video-surveillance>
    <personnel-accessDetails
      v-if="moduleList[29].moduleSeat.length > 0"
      :ref="moduleRefName[29]"
      :style="dragItemStyle[29].style"></personnel-accessDetails>
    <energy-consumption-in-park
      v-if="moduleList[30].moduleSeat.length > 0"
      :ref="moduleRefName[30]"
      :style="dragItemStyle[30].style"></energy-consumption-in-park>
    <park-parking-details
      v-if="moduleList[31].moduleSeat.length > 0"
      :ref="moduleRefName[31]"
      :style="dragItemStyle[31].style"></park-parking-details>
    <park-vehicle-statistics
      v-if="moduleList[32].moduleSeat.length > 0"
      :ref="moduleRefName[32]"
      :style="dragItemStyle[32].style"></park-vehicle-statistics>
    <campus-monitoring-warning
      v-if="moduleList[33].moduleSeat.length > 0"
      :ref="moduleRefName[33]"
      :style="dragItemStyle[33].style"></campus-monitoring-warning>
    <warning-of-the-park
      v-if="moduleList[34].moduleSeat.length > 0"
      :ref="moduleRefName[34]"
      :style="dragItemStyle[34].style"></warning-of-the-park>
    <operation-overview
      v-if="moduleList[35].moduleSeat.length > 0"
      :ref="moduleRefName[35]"
      :style="dragItemStyle[35].style"></operation-overview>
    <operating-income-of-the-park
      v-if="moduleList[36].moduleSeat.length > 0"
      :ref="moduleRefName[36]"
      :style="dragItemStyle[36].style"></operating-income-of-the-park>
    <overview-of-rental-income
      v-if="moduleList[37].moduleSeat.length > 0"
      :ref="moduleRefName[37]"
      :style="dragItemStyle[37].style"></overview-of-rental-income>
    <park-service-system-inner
      v-if="moduleList[38].moduleSeat.length > 0"
      :ref="moduleRefName[38]"
      :style="dragItemStyle[38].style"></park-service-system-inner>
    <annual-rental-trend
      v-if="moduleList[39].moduleSeat.length > 0"
      :ref="moduleRefName[39]"
      :style="dragItemStyle[39].style"></annual-rental-trend>-->
  </div>
</template>

<script>
import { moduleStyle } from './../../utils/modulePosition' // 样式
import { moduleRefName, moduleHtmlName } from '@/utils/refModuleName' // ref名字
import BasicInformation from './../index/BasicInformation.vue' // 基础信息
import ComplaintSatisfaction from './../index/ComplaintSatisfaction.vue' // 客户满意度2
import ServiceOrder from './../index/ServiceOrder.vue' // 客服工单
import PropertyCharges from './../index/PropertyCharges.vue' // 物业收费
import SecurityControl from './../index/SecurityControl.vue' // 安防管控
import EquipmentEnergy from './../index/EquipmentEnergy.vue' // 设备能耗
import WarehouseInformation from './../index/WarehouseInformation.vue' // 仓库信息
import StaffAttendance from './../index/StaffAttendance.vue' // 员工考勤
import EquipmentInformation from './../index/EquipmentInformation.vue' // 设备信息
import PatrolAnalysis from './../index/PatrolAnalysis.vue' // 巡更分析
import EmployeeReport from './../index/EmployeeReport.vue' // 员工报单
import StockAssets from './../index/StockAssets.vue' // 存量资产概况
import AssetsHandling from './../index/AssetsHandling.vue' // 处置资产概况
import StockDistribution from './../index/StockDistribution.vue' // 存量资产分布
import AssetsDistribution from './../index/AssetsDistribution.vue' // 处置资产分布
import OverviewOfThePark from './../index/OverviewOfThePark.vue' // 园区概况
import ProjectPicture from './../index/ProjectPicture.vue' // 项目图片
import ParkEnvironmentalIndex from './../index/ParkEnvironmentalIndex.vue' // 园区环境
import ParkServiceSystem from './../index/ParkServiceSystem.vue' // 园区服务体系
import BusinessIncubationInParks from './../index/BusinessIncubationInParks.vue' // 园区活动
import TalentIntroduction from './../index/TalentIntroduction.vue' // 企业人才引进
import IndustryDistribution from './../index/IndustryDistribution.vue' // 企业分布
import TrendOfParkService from './../index/TrendOfParkService.vue' // 园区服务趋势
import DistributionOfIncomeScale from './../index/DistributionOfIncomeScale.vue' // 企业收入分布
import TaxScaleDistribution from './../index/TaxScaleDistribution.vue' // 纳税规模分布
import PatentDistributionInPark from './../index/PatentDistributionInPark.vue' // 园区专利分布
import CustomerSatisfaction from './../index/CustomerSatisfaction.vue' // 客户满意度
import OverallOfThePark from './../index/OverallOfThePark.vue' // 园区整体概况
import VideoSurveillance from './../index/VideoSurveillance.vue' // 视频监控
import PersonnelAccessDetails from './../index/PersonnelAccessDetails.vue' // 人员出入详情
import EnergyConsumptionInPark from './../index/EnergyConsumptionInPark.vue' // 园区能耗详情
import ParkParkingDetails from './../index/ParkParkingDetails.vue' // 园区车位详情
import ParkVehicleStatistics from './../index/ParkVehicleStatistics.vue' // 园区车辆统计
import CampusMonitoringWarning from './../index/CampusMonitoringWarning.vue' // 园区监控告警
import WarningOfThePark from './../index/WarningOfThePark.vue' // 园区周界告警
import OperationOverview from './../index/OperationOverview.vue' // 运营概况
import OperatingIncomeOfThePark from './../index/OperatingIncomeOfThePark.vue' // 园区经营收入
import OverviewOfRentalIncome from './../index/OverviewOfRentalIncome.vue' // 租金收入概况
import ParkServiceSystemInner from './../index/ParkServiceSystemInner.vue' // 园区服务体系
import AnnualRentalTrend from './../index/AnnualRentalTrend.vue' // 租金收入概况
import Mission from './../index/Mission.vue' // 任务看板
import LeasingResources from './../assetsManagement/page/LeasingResources.vue' // 资源租赁情况
import GoalsAchieved from './../assetsManagement/page/GoalsAchieved.vue' // 管理主体目标达成
import VacancyInTheYear from './../assetsManagement/page/VacancyInTheYear.vue' // 本年空置情况
import GoalAttainment from './../assetsManagement/page/GoalAttainment.vue' // 目标达成概况
import RentalIncomeTrend from './../assetsManagement/page/RentalIncomeTrend.vue' // 租金收入趋势
import CurrentYearLeaseTrend from './../assetsManagement/page/CurrentYearLeaseTrend.vue' // 本年租赁趋势
import CurrentYearContractChanges from './../assetsManagement/page/CurrentYearContractChanges.vue' // 本年签约变化
const moduleHtmlNameMessage = moduleHtmlName()
const htmlNameTemplate = moduleHtmlNameMessage.htmlNameTemplate
const Wrap = {
  functional: true,
  props: ['item', 'flag', 'refName', 'styleMessage'],
  render (h, ctx) {
    // const Dict = {
    // 'basic-information': BasicInformation,
    // 'complaint-satisfaction': ComplaintSatisfaction,
    // 'service-order': ServiceOrder,
    // 'property-charges': PropertyCharges,
    // 'security-control': SecurityControl,
    // 'equipment-energy': EquipmentEnergy,
    // 'warehouse-information': WarehouseInformation,
    // 'staffAttendance': StaffAttendance,
    // 'equipment-information': EquipmentInformation,
    // 'patrol-analysis': PatrolAnalysis,
    // 'employee-report': EmployeeReport,
    // 'stock-assets': StockAssets,
    // 'assets-handling': AssetsHandling,
    // 'stock-distribution': StockDistribution,
    // 'assets-distribution': AssetsDistribution,
    // 'overview-of-the-park': OverviewOfThePark,
    // 'project-picture': ProjectPicture,
    // 'park-environmental-index': ParkEnvironmentalIndex,
    // 'park-service-system': ParkServiceSystem,
    // 'business-incubation-in-parks': BusinessIncubationInParks,
    // 'talent-introduction': TalentIntroduction,
    // 'industry-distribution': IndustryDistribution,
    // 'trend-of-park-service': TrendOfParkService,
    // 'distribution-of-income-scale': DistributionOfIncomeScale,
    // 'tax-scale-distribution': TaxScaleDistribution,
    // 'patent-distribution-in-park': PatentDistributionInPark,
    // 'customer-satisfaction': CustomerSatisfaction,
    // 'overall-of-the-park': OverallOfThePark,
    // 'video-surveillance': VideoSurveillance,
    // 'personnel-access-details': PersonnelAccessDetails,
    // 'energy-consumption-in-park': EnergyConsumptionInPark,
    // 'park-parking-details': ParkParkingDetails,
    // 'park-vehicle-statistics': ParkVehicleStatistics,
    // 'campus-monitoring-warning': CampusMonitoringWarning,
    // 'warning-of-the-park': WarningOfThePark,
    // 'operation-overview': OperationOverview,
    // 'operating-income-of-the-park': OperatingIncomeOfThePark,
    // 'overview-of-rental-income': OverviewOfRentalIncome,
    // 'park-service-system-inner': ParkServiceSystemInner,
    // 'annual-rental-trend': AnnualRentalTrend
    // }
    if (ctx.props.flag) {
      return h(htmlNameTemplate[ctx.props.item], {
        ref: ctx.props.refName,
        style: ctx.props.styleMessage,
        props: {
          organId: ctx.props.organId
        }
      })
    }
  }
}
const components = {
  BasicInformation,
  ComplaintSatisfaction,
  ServiceOrder,
  PropertyCharges,
  SecurityControl,
  EquipmentEnergy,
  WarehouseInformation,
  StaffAttendance,
  EquipmentInformation,
  PatrolAnalysis,
  EmployeeReport,
  StockAssets,
  AssetsHandling,
  StockDistribution,
  AssetsDistribution,
  OverviewOfThePark,
  ProjectPicture,
  ParkEnvironmentalIndex,
  ParkServiceSystem,
  BusinessIncubationInParks,
  TalentIntroduction,
  IndustryDistribution,
  TrendOfParkService,
  DistributionOfIncomeScale,
  TaxScaleDistribution,
  PatentDistributionInPark,
  CustomerSatisfaction,
  OverallOfThePark,
  VideoSurveillance,
  PersonnelAccessDetails,
  EnergyConsumptionInPark,
  ParkParkingDetails,
  ParkVehicleStatistics,
  CampusMonitoringWarning,
  WarningOfThePark,
  OperationOverview,
  OperatingIncomeOfThePark,
  OverviewOfRentalIncome,
  ParkServiceSystemInner,
  AnnualRentalTrend,
  Mission,
  LeasingResources,
  GoalsAchieved,
  VacancyInTheYear,
  GoalAttainment,
  RentalIncomeTrend,
  CurrentYearLeaseTrend,
  CurrentYearContractChanges,
  Wrap
}
export default {
  name: 'index',
  components: components,
  props: {
    pageConfig: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      moduleRefName: moduleRefName,
      showIndex: [],
      currentIndex: 0,
      htmlArray: moduleHtmlNameMessage.htmlArray
    }
  },
  computed: {
    moduleList () {
      return this.$store.state.moduleList
    },
    dragItemStyle () {
      return moduleStyle(this.$store.state.moduleList)
    },
    themeConfig () {
      return this.$store.state.themeConfig
    },
    organId () {
      return this.$store.state.organId
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    resizeChart () {
      this.showIndex.forEach(item => {
        if (this.$refs[moduleRefName[item]] && this.$refs[moduleRefName[item]].resizeChart !== undefined) {
          this.$refs[moduleRefName[item]].resizeChart()
        }
      })
    },
    // 各个模块获取数据， type为init的时候，为初始数据， type为setChart的时候，为重绘echarts
    getData (type, redrawIndex) {
      if (type === 'init') {
        let arr = []
        let refreshInterval = []
        this.$store.state.moduleList.forEach((item, index) => {
          if (item.moduleSeat.length > 0) {
            arr.push(index)
            refreshInterval.push(item.refreshInterval)
          }
        })
        this.showIndex = arr
        arr.forEach((item, index) => {
          if (this.$refs[moduleRefName[item]]) {
            this.$refs[moduleRefName[item]].getData(type, refreshInterval[index])
          }
        })
        this.automaticRedrawing('start')
      } else {
        if (redrawIndex < this.showIndex.length) {
          if (this.$refs[moduleRefName[this.showIndex[redrawIndex]]]) {
            this.$refs[moduleRefName[this.showIndex[redrawIndex]]].getData(type)
          }
        }
      }
    },
    automaticRedrawing (type) {
      let self = this
      let number = -10
      if (type === 'start') {
        clearInterval(window.redrawingTime)
        window.redrawingTime = setInterval(function () {
          if (number > 12) {
            number = 0
          }
          if (number >= 0) {
            self.getData('setChart', number)
          }
          number++
        }, 30000)
      } else {
        clearInterval(window.redrawingTime)
      }
    }
  },
  mounted () {
  },
  watch: {
    pageConfig (val) {
      if (val && this.organId !== '') {
        this.getData('init')
      }
    },
    'themeConfig.isSetting' (val) {
      if (!val) {
        this.automaticRedrawing('end')
        this.$nextTick(function () {
          this.getData('init')
        })
      } else {
        this.automaticRedrawing('end')
      }
    },
    organId (val) {
      if (this.pageConfig) {
        this.automaticRedrawing('end')
        this.getData('init')
      }
    },
    moduleList (val) {
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: calc(100% - 10px);
  position: relative;
  margin: 5px;
  overflow: hidden;
  .content-seat {
    width: calc(25% - 8px);
    margin: 2px 4px;
    opacity: 0;
    float: left;
    img {
      width: 100%;
    }
  }
}
</style>
